<template>
    <el-row>
        <el-col :span="24">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>用户分析</span>
                    </div>
                </template>
                <el-descriptions direction="vertical" column="4">
                    <el-descriptions-item align="center" label="用户总数" label-class-name="my-label" class-name="my-content">
                        {{ '100 人' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="管理员数" align="center">5 人</el-descriptions-item>
                    <el-descriptions-item label="普通管理员数" align="center">15 人</el-descriptions-item>
                    <el-descriptions-item label="普通用户数" align="center">80 人</el-descriptions-item>
                </el-descriptions>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="10">
        <el-col :span="8">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>用户类型分析</span>
                    </div>
                </template>
                <div id="userTypeCharts" style="height: 300px;"></div>
            </el-card>
        </el-col>
        <el-col :span="16">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>用户性别分析</span>
                    </div>
                </template>
                <div id="userSexCharts" style="height: 300px;"></div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {onMounted} from 'vue';
import axios from 'axios';

onMounted(async () => {
    const {data} = await axios.get('/api/user/analysis');
    console.log(data);
    const userTypeData = data.userType;
    const userSexData = data.userSex;

    // 图表绘制
    initUserTypeCharts(userTypeData);
    initUserSexCharts(userSexData);
});

//-----------------------------  用户类型图表 ---------------------------------
// 清洗用户类型数据
const prepareUserTypeData = (data) => {
    let userTypeData = new Array();
    data.forEach(item => {
        if (item.yhsf == 0) {
            userTypeData[0] = item.count;
        } else if (item.yhsf == 2) {
            userTypeData[1] = item.count;
        } else if (item.yhsf == 3) {
            userTypeData[2] = item.count;
        }
    });
    return userTypeData;
}
// 绘制用户类型图表
const initUserTypeCharts = (userTypeData) => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('userTypeCharts'));
    // 绘制图表
    const option = {
        title: {
            // text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
            data: ['管理员', '普通管理员', '普通用户']
        },
        yAxis: {},
        series: [
            {
                name: '人数',
                type: 'bar',
                data: prepareUserTypeData(userTypeData)
            }
        ]
    }
    myChart.setOption(option);
}

//-----------------------------  用户性别图表 ---------------------------------
// 清洗用户性别数据
const prepareUserSexData = (data) => {
    let userSexData = new Array();
    data.forEach(item => {
        if (item.sex == "男") {
            userSexData[0] = {value: item.count, name: '男'};
        } else if (item.sex == "女") {
            userSexData[1] = {value: item.count, name: '女'};
        } else {
            userSexData[2] = {value: item.count, name: '未知'};
        }
    });
    return userSexData;
}
// 绘制用户性别图表
const initUserSexCharts = (userSexData) => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('userSexCharts'));

    const option = {
        title: {
            // text: 'Referer of a Website',
            // subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '人数',
                type: 'pie',
                radius: '80%',
                data: prepareUserSexData(userSexData),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
}
</script>

<style scoped>
.el-row {
    margin-bottom: 10px;
}

.card-header {
    color: green;
}

:deep(.my-label) {
    color: darkgray;
}

:deep(.my-content) {
    color: red;
}
</style>